<template>
  <div class="login-wrap">
    <div class="form"> 
      <div class="login-title">登录页</div>
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="user">
        <el-input v-model="ruleForm.user"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
      </el-form-item>
    </el-form>

    </div>

  </div>
</template>
<script>
export default {
  data() {
    var checkUser = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('用户名不能为空'));
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };

    return {
      ruleForm: {
        pass: '',
        user: ''
      },
      rules: {
        pass: [{ validator: validatePass, trigger: 'blur' }],
        user: [{ validator: checkUser, trigger: 'blur' }]
      }
    };
  },
  methods: {
    submitForm(formName) {
      // console.log(1);
      this.$api.submitForm({
        userName: this.ruleForm.user,
        passWord: this.ruleForm.pass
      }).then(value =>{
        console.log(value)
        localStorage.setItem('id',value.data.userinfo.id);
         this.$router.push({ path: 'applyfor', query: { id: '0' } });
      });

      // this.$router.push({ path: 'list', query: { id: '0' } });
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //     alert('submit!');
      //   } else {
      //     console.log('error submit!!');
      //     return false;
      //   }
      // });
    }
    //   resetForm(formName) {
    //     this.$refs[formName].resetFields();
    //   }
  }
};
</script>
<style lang="scss">
.login-wrap {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  top: -1px;
  left: -1px;
  background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2F2c.zol-img.com.cn%2Fproduct%2F71%2F908%2FceYSo40800AtY.jpg&refer=http%3A%2F%2F2c.zol-img.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636904737&t=48038ed2bb9a483899d716800b5b2c8b') no-repeat;
  background-size: cover;
  .form {
    width: 500px;
    border: 1px solid rgb(184, 194, 199);
    margin: 100px auto 0;
    text-align: center;
    padding: 20px 50px 0 0;
    border-radius: 20px;

    .login-title {
      font-size: 30px;
      padding: 0 0 30px 100px;
      color: rgba(240, 240, 227, 0.815);
    }
  }
}
</style>
